<template>
  <div class="bg_white">
  <a-layout>
    <a-layout-header style="height: 120px">
      <a-card size="small" title="实时课堂总览" style="width: 100%">
        <a slot="extra" href="#"><a-icon type="reload" />刷新</a>
        <a-row :gutter="24">
          <a-col :span="8">
            <a-statistic
              title="当前课堂总数"
              :value="1128"
              style="margin-right: 50px">
              <template #suffix>
                <span>个</span>
              </template>
            </a-statistic>
          </a-col>
          <a-col :span="8">
            <a-statistic
              title="当前上课人数"
              :value="1128"
              style="margin-right: 50px">
              <template #suffix>
                <span>人</span>
              </template>
            </a-statistic>
          </a-col>
        </a-row>
      </a-card></a-layout-header>

    <a-table :columns="columns" :data-source="data" bordered class="margin_top">
      <template slot="name" slot-scope="text">
        <a>{{ text }}</a>
      </template>
      <template slot="title"> 课堂列表 </template>
    </a-table>
  </a-layout>
</div>
</template>

<script>
const columns = [
  {
    title: "发起时间",
    dataIndex: "name",
    scopedSlots: { customRender: "name" },
  },
  {
    title: "发起教职工",
    className: "column-money",
    dataIndex: "money",
  },
  {
    title: "所在班级",
    dataIndex: "address",
  },
  {
    title: "参与课堂人数",
    dataIndex: "address",
  },
];

const data = [];
export default {
  data() {
    return {
      data,
      columns,
    };
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="less" scoped>
.ant-layout-header {
  background: #03212100 !important;
  padding: 0 0 !important;
}

.margin_top {
  margin-top: 16px;
}
</style>
